import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Modal,Radio } from 'antd';
import { WeaNewScroll,WeaTab,WeaTools,WeaTop,WeaSearchGroup,WeaFormItem,WeaBrowser,WeaDateGroup,WeaInput,WeaSelect,WeaRightMenu,WeaDialog} from 'ecCom';
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
@observer
export default class PlanResultList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showSearchAd :false,
        isrefesh:false,
        topTab:[{
          title: "月报",
          viewcondition: "1"
        },
        {
          title: "周报",
          viewcondition: "2"
        }],
        selectedKey:1,
        columns:[
          {title: '人员',dataIndex: 'khname',width:'30%',
          render:(text, record, index) => <a className="noWrap" href={'/CRM/manage/customer/CustomerBaseView.jsp?CustomerID='+record.kh} target="_blank"  title={text}>{text}</a>
          },
          {title: '分部',dataIndex: 'jsrname', width:'20%',
          render:(text, record, index) => <a className="noWrap" href={'/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/'+record.jsr} target="_blank" title={text}>{text}</a>
          },
          {title: '部门',dataIndex: 'cjrq',width:'20%',
          render:(text, record, index) =><div title={text} className="noWrap">{text}</div>
          },
          {title: '状态',dataIndex: 'clrname',width:'20%',
          render:(text, record, index) => <a className="noWrap" href={'/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/'+record.clr} target="_blank" title={text}>{text}</a>
          },
          {title: '操作',dataIndex: 'clsj',width:'10%',
          render:(text, record, index) =><div title={text} className="noWrap">{text}</div>
          }
        ],
        menu :[
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '搜索',
          onClick: key => {},
        }
        ],
        yearDatas:[],
        _height:this.getHeight(),
        heightInit:false,
      }
    }
    componentWillMount() {//一些初始化请求
      let ydatas = [];
      for(let i=2013;i<2020;i++){
       ydatas.push({key: i,showname: i,selected: false});
      }
      this.setState({yearDatas:ydatas});
    }
    
    //重置查询条件
    resetSearchAd(){
      cancleSearchAd();
    }
    //搜索
    advanceSearch(){
      cancleSearchAd();
    }
    cancleSearchAd(){
      this.setState({
        showSearchAd:false
      });
    }
    getTabButtonsAd() {
      return [
          (<Button type="primary" onClick={()=>this.advanceSearch()}>搜索</Button>),
          (<Button type="ghost" onClick={()=>this.resetSearchAd()}>重置</Button>),
          (<Button type="ghost" onClick={()=>this.cancleSearchAd(false)}>取消</Button>)
      ]
    }
    showTotal(total){
      return `共 ${total} 条`;
    }
    showCurrentChange = (current) => {
      
    }
    onShowSizeChange =(current, pageSize)=>{
     
    }
    onSelectChange = (selectedRowKeys,selectedRows) => {
     
    }
    getHeight(header){
      let h = 0;
      if(header){
          h = header.clientHeight || 0;
      }
      return window.innerHeight-h;
    }
    render() {
      const{showSearchAd,columns,menu,yearDatas,_height,datalist,selectedRowKeys,topTab,selectedKey} = this.state;
      let header = document.getElementsByClassName("e9theme-layout-header")[0];
      if(header && !heightInit){
          this.setState({_height:this.getHeight(header),heightInit:true});
      }
      return (
        <div className="wea-workrelate-plan-resultlist" style={{height:_height}}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaTop
              title="报告查询列表"
              icon={<i className='icon-coms-ModelingEngine-o' />}
              iconBgcolor='rgb(150, 53, 138)'
              buttons = {[(<Button type='primary' onClick={()=>this.advanceSearch()}>搜索</Button>)]}
              showDropIcon={true}
              dropMenuDatas = {menu}
            />
              <WeaTab
                datas={topTab}
                searchType={["advanced","base"]}
                showSearchAd={showSearchAd}
                keyParam="viewcondition" //主键
                selectedKey={selectedKey}
                hideSearchAd = {()=>this.cancleSearchAd()}
                setShowSearchAd={bool => {
                  this.setState({
                    showSearchAd: bool
                  });
                }}
                buttonsAd={this.getTabButtonsAd()}
                // searchsAd={this.getSearchsAd()}
              />
              <div style={{padding:"5px 10px"}}>
              <WeaSelect options={yearDatas} value={"2019"} viewAttr={2} style={{width:80,marginRight:10}}/>
              <RadioGroup  onChange={(e)=>this.onMonthChange(e)} defaultValue={"4"} style={{verticalAlign:"bottom"}}>
                        <RadioButton value="1" style={{border:"1px solid #e2e2e2"}}>1月</RadioButton>
                        <RadioButton value="2" style={{border:"1px solid #e2e2e2"}}>2月</RadioButton>
                        <RadioButton value="3" style={{border:"1px solid #e2e2e2"}}>3月</RadioButton>
                        <RadioButton value="4" style={{border:"1px solid #e2e2e2"}}>4月</RadioButton>
                        <RadioButton value="5" style={{border:"1px solid #e2e2e2"}}>5月</RadioButton>
                        <RadioButton value="6" style={{border:"1px solid #e2e2e2"}}>6月</RadioButton>
                        <RadioButton value="7" style={{border:"1px solid #e2e2e2"}}>7月</RadioButton>
                        <RadioButton value="8" style={{border:"1px solid #e2e2e2"}}>8月</RadioButton>
                        <RadioButton value="9" style={{border:"1px solid #e2e2e2"}}>9月</RadioButton>
                        <RadioButton value="10" style={{border:"1px solid #e2e2e2"}}>10月</RadioButton>
                        <RadioButton value="11" style={{border:"1px solid #e2e2e2"}}>11月</RadioButton>
                        <RadioButton value="12" style={{border:"1px solid #e2e2e2"}}>12月</RadioButton>
                    </RadioGroup>
              </div>
              <Table columns={columns} bordered={true} scroll={{y: _height - 220}} dataSource={datalist} className ="wea-develop-antd-table"
               pagination={{
                  total: 1,
                  onChange: this.showCurrentChange,
                  showTotal:this.showTotal,
                  current:1,
                  showQuickJumper:true,
                  pageSize:10,
                  showSizeChanger:true, 
                  onShowSizeChange:this.onShowSizeChange
              }}/>
          </WeaRightMenu>
        </div>
    )
  }
};